<script>
import { showToast } from "../../utils"
import request from "../../utils/request"
import { bindPhone } from "./bindPhone"

export default {
  name: "bindMobilePhone",
  data() {
    return {
      redirectUrl: "",
      message: "",
    }
  },
  methods: {
    // 绑定手机号码
    handleBindPhone(e) {
      bindPhone(e.detail.code).then(() => {
        //页面跳转
        if (this.redirectUrl) {
          //针对首页
          if (this.redirectUrl.indexOf("pages/index/index") !== -1) {
            console.log("reLaunch")
            uni.reLaunch({
              url: this.redirectUrl,
            })
          } else {
            console.log("redirectTo")
            uni.switchTab({
              url: this.redirectUrl,
            })
            uni.redirectTo({
              url: this.redirectUrl,
            })
          }
        } else {
          uni.navigateBack()
        }
      })
    },
  },
  onLoad(e) {
    if (e.redirectUrl) {
      this.redirectUrl = decodeURIComponent(e.redirectUrl)
    }
    this.message = e.message
  },
}
</script>

<template>
  <view class="page">
    <image class="logo" src="/static/logo.jpg"></image>
    <view class="message" v-if="message">{{ message }}</view>
    <view class="description">
      <view class="title">申请获取以下权限</view>
      <view class="text">· 获取您的手机号码</view>
    </view>
    <view class="btn-list">
      <view class="cancel-btn btn" @click="() => $uni.navigateBack()">取消</view>
      <button open-type="getRealtimePhoneNumber" @getrealtimephonenumber="handleBindPhone" class="bind-phone-btn btn">同意</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;

  .logo {
    margin-top: 15vh;
    width: 206rpx;
    height: 206rpx;
  }

  .message {
    color: #666666;
    font-size: 30rpx;
    margin-top: 50rpx;
    width: 80vw;
  }

  .description {
    font-size: 32rpx;
    background: #eeeeee;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    width: 80vw;

    .title {
      font-size: 24rpx;
      color: #666666;
    }

    .text {
      color: #111111;
      font-size: 30rpx;
    }
  }

  .btn-list {
    display: flex;
    justify-content: space-around;
    margin-top: 80rpx;
    width: 100vw;
    .btn {
      height: 80rpx;
      width: 260rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      border-radius: 10rpx;
    }
    .bind-phone-btn {
      background: var(--theme-color);
			color: var(--text-color-white);
      margin: 0;
    }
    .cancel-btn {
      background: #eeeeee;
    }
  }
}
</style>
